
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input
            v-model="listQuery.keyword"
            placeholder="输入菜单名称搜索"
            class="input-with-select"
            @keypress.enter.native="handleFilter"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.status"
            style="width:100%"
            placeholder="请选择状态"
            @change="handleFilter"
          >
            <el-option
              label="启用"
              value="1"
            />
            <el-option
              label="禁用"
              value="0"
            />
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            icon="el-icon-edit"
            @click="handleCreate"
          >
            添加
          </el-button>
        </el-col>

      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      :v-loading="listLoading"
      :data="list"
      height="calc(100vh - 230px)"
      style="width: 100%;margin-bottom: 20px;"
      size="mini"
      border
      tooltip-effect="dark"
      :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
      row-key="menu_id"
      lazy
      :load="load"
    >

      <el-table-column
        label="菜单名称"
        prop="menu_name"
        min-width="100px"
      />
      <el-table-column
        label="菜单类型"
        prop="menu_type"
        width="80px"
      >
        <template slot-scope="{row}">
          <span>{{ getStatusText(row.menu_type) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="接口地址"
        prop="route_api"
        min-width="100px"
      />

      <el-table-column
        label="前端路由"
        prop="route_path"
        min-width="80px"
      />

      <el-table-column
        label="默认跳转"
        prop="redirect"
        min-width="80px"
      />

      <el-table-column
        label="排序"
        prop="sort"
        sortable
        align="center"
        width="80"
      >
        <template slot-scope="{row}">
          <span>{{ row.sort }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="启用"
        width="70px"
      >
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :disabled="row.statusChanging"
            @change="statusChanged(row, $event)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="right"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            @click="handleChildCreate(row)"
          >
            Add
          </el-button>
          <el-button
            type="primary"
            @click="handleUpdate(row)"
          >
            Edit
          </el-button>
          <el-popconfirm
            v-if="!row.status"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除?"
            @onConfirm="handleDelete(row)"
            @confirm="handleDelete(row)"
          >
            <el-button
              v-if="row.status!='deleted'"
              slot="reference"
              size="mini"
              type="danger"
              style="margin-left: 10px;"
            >
              Delete
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <UpdateMenuDialog
      :visible.sync="updateMenuData.visible"
      :status="updateMenuData.status"
      :data="updateMenuData.data"
      :list="updateMenuData.list"
      @reload="getList"
    />

  </div>
</template>

<script>
import _ from 'lodash'
import { handleList, handleDel, changeStatus, routerMenu } from '@/api/system/auth/menu'

import { MenuEnums } from '@/enums/menu'

import UpdateMenuDialog from '@/components/Template/System/Auth/UpdateMenuDialog.vue'

export default {
  name: 'Menu',
  components: {
    UpdateMenuDialog
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {

    }
  },
  data() {
    return {

      tableKey: 0,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10000,
        status: '',
        keyword: '',
        route_url: '',
        route_api: '',
        menu_pid: ''
      },
      showReviewer: false,

      updateMenuData: {
        visible: false,
        status: '',
        data: {},
        list: []
      }
    }
  },

  created() {
    this.getList()
    routerMenu()
  },

  methods: {
    getList(reload) {
      if (reload) {
        this.listQuery.menu_pid = ''
      }

      this.listLoading = true
      handleList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.updateMenuData.list = _.cloneDeep(this.list)
        this.listLoading = false
      })
    },

    load(node, treeNode, resolve) {
      this.listQuery.menu_pid = node.menu_id
      handleList(this.listQuery).then(response => {
        const list = response.data.data
        // _.forEach(list, item => {
        //   item.parent
        // })
        resolve(list)
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleCreate() {
      this.updateMenuData.status = 'create'
      this.updateMenuData.visible = true
    },
    handleUpdate(row) {
      this.updateMenuData.status = 'update'
      this.updateMenuData.visible = true
      this.updateMenuData.data = row
    },
    handleChildCreate(row) {
      this.updateMenuData.status = 'childCreate'
      this.updateMenuData.visible = true
      this.updateMenuData.data = row
    },
    handleDelete(row) {
      handleDel({
        menu_id: row.menu_id,
        menu_name: row.menu_name,
        status: row.status
      }).then(() => {
        this.$notify.success('删除成功')
        this.getList()
      })
    },

    statusChanged(row, val) {
      console.log(val)
      this.$set(row, 'statusChanging', true)
      // 状态切换
      changeStatus({
        menu_id: row.menu_id,
        menu_name: row.menu_name,
        status: val
      }).then(() => {
        this.$set(row, 'statusChanging', false)
      }).catch(() => {
        this.$set(row, 'statusChanging', false)
        row.status = val === 1 ? 0 : 1
      })
    },

    getStatusText(status) {
      return _.get(MenuEnums.Status, status, '未知')
    },

    isEmpty: _.isEmpty

  }
}
</script>
